<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="datu">
              <div class="w1125">
                <div class="kflexb">
                  <div>
                    <div class="kflexc" style="padding-top: 100px;">
                      <div class="w_title">订单外呼系统</div>
                      <img class="w_img" src="../../../static/img/waihu/dianhua.png">
                    </div>
                    <div class="w_alt">
                      完善订单信息提高发货率提升用户激活率、 活动营销、 存量用户运营
                    </div>
                  </div>
                  <div class="w_img2">
                    <img src="../../../static/img/waihu/waihu10.png" style="width: 355px; margin-top: 50px;">
                  </div>
                </div>
              </div>
          </div>
          <div class="w1000" style="padding-bottom: 50px;">
                <div class="w_title2 kflexcc">
                  <div class="kflexc"><img src="../../../static/img/waihu/juxing1.png"></div>
                  <div>快速创建外呼任务，多种任务创建方式</div>
                  <div class="kflexc"><img src="../../../static/img/waihu/juxing2.png"></div>
                </div>

                <div class="kflexbc" style="margin-bottom: 90px;">
                  <div>
                    <div class="w_title3">导入号码创建任务</div>
                    <div class="w_alt2">按表单拨打</div>
                    <div class="w_alt2">导出拨打结果</div>
                  </div>
                  <div class="w_img3">
                    <img src="../../../static/img/waihu/waihu1.png">
                  </div>
                </div>

                <div class="kflexbc">

                  <div class="w_img3">
                    <img src="../../../static/img/waihu/waihu2.png" style="width: 428px;">
                  </div>
                  <div>
                    <div class="w_title3">通过条件筛选创建任务</div>
                    <div class="w_alt2" style="width: 340px;">外呼任务表单自动更新</div>
                    <div class="w_alt2" style="width: 340px;">满足条件订单自动进入任务</div>
                    <div class="w_alt2" style="width: 340px;">无需每日更新</div>
                  </div>
                </div>

              <div class="w_title2 kflexcc">
                <div class="kflexc"><img src="../../../static/img/waihu/juxing1.png"></div>
                <div>灵活的任务分配和后续服务跟踪</div>
                <div class="kflexc"><img src="../../../static/img/waihu/juxing2.png"></div>
              </div>

              <div class="kflexbc">
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu3.png" style="width: 92px;"></div>
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu11.png" style="width: 232px;"></div>
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu4.png" style="width: 102px;"></div>
              </div>

              <div class="kflexbc" style="margin-top: 55px; color: rgb(123, 130, 142);">
                <div class="kflexcc" style="flex: 1;">1.可指定人员完成</div>
                <div class="kflexcc" style="flex: 1;">2.可自由抢单</div>
                <div class="kflexcc" style="flex: 1;">3.可根据标签筛选二次外呼</div>
              </div>

              <div class="w_title2 kflexcc">
                <div class="kflexc"><img src="../../../static/img/waihu/juxing1.png"></div>
                <div>任务拨打效果实时了解</div>
                <div class="kflexc"><img src="../../../static/img/waihu/juxing2.png"></div>
              </div>
              <div style="margin: 40px 0; text-align: center; color: rgb(123, 130, 142);">任务报表、业绩统计</div>

              <div class="w_img3 kflexcc">
                <img src="../../../static/img/waihu/waihu5.png" style="width: 702px;">
              </div>

              <div class="w_title2 kflexcc">
                <div class="kflexc"><img src="../../../static/img/waihu/juxing1.png"></div>
                <div>外呼用户自动快速分类</div>
                <div class="kflexc"><img src="../../../static/img/waihu/juxing2.png"></div>
              </div>

              <div class="kflexbc">
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu6.png" style="width: 37px;"></div>
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu7.png" style="width: 37px;"></div>
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu8.png" style="width: 37px;"></div>
                <div class="kflexcc" style="flex: 1;"><img src="../../../static/img/waihu/waihu9.png" style="width: 37px;"></div>
              </div>

              <div class="kflexbc" style="margin-top: 30px; color: rgb(123, 130, 142);">
                <div class="kflexcc" style="flex: 1;">标记用户意向</div>
                <div class="kflexcc" style="flex: 1;">用户标签分类</div>
                <div class="kflexcc" style="flex: 1;">针对性二次回访</div>
                <div class="kflexcc" style="flex: 1;">提高转化效率</div>
              </div>


          </div>
			</div>
		</div>
		<!-- <foot></foot> -->
    <notice></notice>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
  import notice from '@/components/notice.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot,
      "notice": notice
		},
		name: 'index',
		data(){
			return{


			}
		},
		created() {

		},
		methods:{

		}
	}
</script>

<style lang="scss" scoped>
	.index{ background: #F4F4F4;
		.center{ width: 100%; margin: 0 auto; display: flex; justify-content: space-between; background: #F4F4F4;
      .left{ width: 200px; height: 100vh; overflow-y: auto;}
			.right{ width: calc(100vw - 210px); height: 100vh; overflow-y: auto;
        .datu{ height: 350px; background: url('../../../static/img/waihu/datu.png');}
        .w1125{ width: 1125px; margin: 0 auto;}
        .w1000{width: 1000px; margin: 0 auto;}
        .w_title{
          font-size: 40px; margin-right: 20px;
        }
        .w_img{ width: 36px;}
        .w_alt{ font-size: 22px; margin-top: 60px; color: rgb(123, 130, 142);}
        .w_title2{ font-size: 35px; margin: 60px 0px;
          img{ width: 21px; margin: 0 35px;}
        }
        .w_title3{ color: rgb(51, 51, 51); font-size: 28px; padding-bottom: 30px;}
        .w_alt2{ background: rgba(243, 245, 249, 0.6); line-height: 71px; padding-left: 20px; margin-top: 20px; color: rgb(123, 130, 142);}
        .w_img3{
          img{ width: 527px; border: 9px #rgb(238, 240, 245) solid;}
        }

			}
		}
	}
</style>
